<template>
  <div>
    <base-layout
      :dialogVisible="dialogVisible"
      :dialogTitle="dialogTitle"
      @dialog-close="dialogClose"
    >
      <template #searchPanel>
        <el-row>
          <el-col :span="21">预警配件列表</el-col>
           <el-col :span="2">
            <el-button icon="el-icon-plus" type="primary">添加预警配件</el-button>
          </el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <data-table
          ref="stockWarnTable"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          :width="160"
          :isShowPage="true"
          :hasAction="false"
          :totalCount="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></data-table>
      </template>
      <template #contentPanel>
        <div style="text-align: right">
          <el-button type="success" @click="save">保存库存预警设置</el-button>
        </div>
      </template>
    </base-layout>
  </div>
</template>
<script>
import baseMixin from '@/mixins/base'
import { alarmPartsPage } from '@/api/after-sale/storehouseManage/inStockManage'

export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: alarmPartsPage,
      dataName: ['content', 'totalRecords'],
    }),
  ],
  props: {
    checkList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      //table字段
      tableColumnAttributes: [
        {
          name: '所属门店',
          value: 'storeName',
          type: 'text',
        },
        {
          name: '配件编号',
          value: 'partsCode',
          type: 'text',
        },
        {
          name: '配件名称',
          value: 'partsName',
          type: 'text',
        },
        {
          name: '配件类别',
          value: 'partsType',
          type: 'text',
        },
        {
          name: '配件单位',
          value: 'partsUnit',
          type: 'text',
        },
        {
          name: '最低预警阀门',
          value: 'alarmNum',
          type: 'text',
        },
        {
          name: '最低时长预警',
          value: 'alarmDate',
          type: 'text',
        },
      ],
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          //设置表格的选中状态 延时5毫秒等待表格渲染完成
          this.filterData(newVal).forEach((row) => {
            console.log(this.$refs.roleTable.$refs.multipleTable)
            this.$refs.roleTable.$refs.multipleTable.toggleRowSelection(
              row,
              true
            )
          })
        }, 300)
      },
      deep: true,
    },
  },
  methods: {
    //过滤选中的数据
    filterData(data) {
      return data.filter((item) => {
        for (let index = 0; index < this.checkList.length; index++) {
          if (item.id == this.checkList[index]) {
            return item
          }
        }
      })
    },
    save() {},
  },
}
</script>
